<template>
  <div class="tool-wrap">
      <div class="lef">
         <van-sidebar v-model="activeKey" >
        <van-sidebar-item 
        v-for="(item,index) in toolist" 
        :key="index" 
        :title="item.title"
        @click="hardlerClick(index)" />
      
        </van-sidebar>
      </div>
      <template v-if="toolist[i]">
      <div class="rig">
            <van-grid :column-num="3">
            <van-grid-item v-for="(item,index) in toolist[i].children" :key="index" :icon="item.pic" :text="item.title" />
            </van-grid>
      </div>
      </template>
    
  </div>
</template>

<script>
import axios from "axios";
import Vue from 'vue';
import { Sidebar, SidebarItem } from 'vant';
import { Grid, GridItem } from 'vant';
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
      data() {
        return {
        activeKey: 0,
        toolist:[],
        i:0
    };
  },
    async mounted() {
        // axios是三方库，用的时候需要导入
          let result = await axios.get("/v3/content/Tools/Zhishi.html?do=front")
          this.toolist=result.data.data.frontCate
          console.log(this.toolist)
  

     

    },
    methods:{
        hardlerClick(index){
            // console.log(index)
            this.i=index
            console.log(this.i)
        }
    }

}
</script>

<style lang="stylus" scoped>
.tool-wrap
    height 100%
    display flex
    .rig

        height 100%
        flex 1
        

</style>